 /**
 * 工具区
 * 
 *  @function $$ 选择器;
 * 
 */
let $$ = (selector,all) =>{
    if(all){
          return document.querySelectorAll(selector);
    }
    return document.querySelector(selector);
}
/**
 * banner
 * 
 */
let [flex_prev,  flex_next, js_banner, btn] = [$$(".flex_prev"), $$(".flex_next"), $$(".js_banner"), $$(".flex_control_paging")];
class Banner{
    constructor(){}
    init(flex_next,flex_prev,js_banner,btn){
        this.flex_next = flex_next;
        this.flex_prev = flex_prev;
        this.js_banner = js_banner;
        this.bannerList = this.js_banner.children;
        this.btn = btn;
        this.btnList = Array.from(this.btn.children);
        this.timer = null;
        this.index = 0;
        this.startMove();
        this.bindEvent();
        this.showTab();
    }
    bindEvent(){
        this.flex_prev.addEventListener("click", this.toPrev.bind(this));
        this.flex_next.addEventListener("click", this.toNext.bind(this));
        for(var i = 0 , ele ; ele = this.btnList[i]; i ++){
            ele.addEventListener("click",this.getIndex.bind(this,i));
            ele.addEventListener("click",this.toPage.bind(this));
        }
    } 
    toPrev(){
        clearInterval(this.timer);
        move(this.bannerList[this.index],0,"opacity");
        if(this.index === 0){    
            this.index = this.bannerList.length - 1;
        }else{
            this.index --;
        }
        move(this.bannerList[this.index],100,"opacity");
        this.showTab();
    }
    toNext(){
        clearInterval(this.timer);
        move(this.bannerList[this.index],0,"opacity");
        if(this.index === this.bannerList.length - 1){ 
            this.index = 0;
        }else{
            this.index ++;
        }
        move(this.bannerList[this.index],100,"opacity");
        this.startMove();
        this.showTab();
    }
    getIndex(index){
        this.index = index;
    }
    toPage(){
        clearInterval(this.timer);
        for(var i = 0,ele;ele = this.btnList[i];i++){
            move(this.bannerList[i],0,"opacity");
            this.removeClass(ele.children[0],"active"); 
        }
        for(var i = 0,ele;ele = this.btnList[i];i++){
            if(i === this.index){
                move(this.bannerList[i],100,"opacity");
                ele.children[0].className = "active";  
            }
        }
        this.startMove();
    }
    startMove(){
        this.timer = setInterval(this.toNext.bind(this),3000);
    }
    showTab(){
        for(var i = 0; i < this.btnList.length; i++){
            this.removeClass(this.btnList[i].children[0],"active");
        }
        this.btnList[this.index].children[0].className = "active";
    }
    removeClass(dom, class_string){
        let classString = dom.className;
        let classArray = classString.split(" ");
        let tab_i = classArray.indexOf(class_string);
        if(tab_i !== -1) classArray.splice(tab_i,1);
        classString = classArray.join("");
        dom.className = classString;
    }
}
var banner = new Banner();
banner.init(flex_next,flex_prev,js_banner,btn);